<template>
	<view class="zxc_centent">
		<view class="olp">
			<view class="ilf">
				<view class="ilf_left">手机号</view>
				<input class="ilf_right" type="text" placeholder="请输入您的新手机号" placeholder-style="font-size:26upx" v-model="phone"/>
			</view>
			<view class="ilf">
				<view class="ilf_left">短信验证</view>
				<view class="olf">
				<input class="ilf_right" type="text" placeholder="请输入验证码" placeholder-style="font-size:26upx" v-model="verify"/>
				<view class="tel_btn" @click="verifyBtn()" v-if="verifyShow">获取验证码</view>
				<view class="tel_btn"  v-else>{{verifyTip+'秒'}}</view>
				</view>
			</view>
		</view>
		<view class="jv" @click="bindPhone">确认</view>
	</view>
</template>

<script>
	export default{
		data (){
			return {
				verify:'',
				verifyShow:true,
				verifyTip:60,
				phone:''
			}
		},
		methods:{
			verifyBtn (){
				this.sendPhone();
				this.timedown(this.verifyTip) 
			},
			timedown (num){
				let that = this;
				if(num == 0){
					that.verifyShow = true;				// 是否显示获取验证码
					return clearTimeout();
				}else{
					that.verifyShow = false;			// 是否显示获取验证码
					setTimeout(function() {  
						that.verifyTip = num-1
						that.timedown(num-1);  
					}, 1000);//定时每秒减一  
				}
			},
			sendPhone(){
				console.log(this.phone,'this.phone');
				let url = this.$api.phoneSendCode + this.phone
				this.$post(url, {},
					(res) => {
						console.log(res,'res');
					}, (res) => {
						uni.showToast({
							title: res.msg ? res.msg : '网络错误',
							icon: 'none'
						});
				}, 1, 0)
			},
			bindPhone(){
				let customerId = uni.getStorageSync('customerId')
				this.$post(this.$api.bindPhone, {customerId,phone:this.phone,code:this.verify},
					(res) => {
						console.log(res,'res');
						if(res.code == 200){
							uni.setStorageSync("nonPhone", '0');
							uni.navigateBack()
						}
					}, (res) => {
						uni.showToast({
							title: res.msg ? res.msg : '网络错误',
							icon: 'none'
						});
				}, 1, 0)
			},
		}
	}
</script>

<style>
	.olp{
		padding:0 30upx 0;
		background-color: #fff;
	}
	.olu{
		font-weight: 700;
		text-align: center;
	}
	.if{
		text-align: center;
		margin-top:10upx;
		font-size: 25upx;
		margin-bottom:30upx;
	}
	.ilf{
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding:30upx 0;
		width:100%;
		margin:0 auto;
		border-bottom:1px solid #ededed;
		font-size: 26upx;
	}
	.ilf input{
		width:70%;
		font-size: 26upx;
	}
	.ilf_right{
		width: 70%;
	}
	.jv{
		background-color: #07c160;
		color:#fff;
		text-align: center;
		padding:20upx 0;
		border-radius: 100upx;
		width:92%;
		margin:200upx auto;
	}
	.olf{
		width: 70%;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.tel_btn{
		white-space: nowrap;
		color:#07c160;
	}
</style>